<template>
	<view>
		<view class="h100p" data-v-8083dada="">
			<view id="find-result" data-v-8083dada="">
				<view class="own-top pr">
					<view class="before-fl"></view>
					<view class="contetn-ft w100p h100p">
						<view class="face-images-wrap center">
							<view class="active face-images-item"><img :src="url" alt=""></view>
						</view>
						<view class="face-result-tips"><text>共找到TA</text><text class="num">{{ flowList.length
						}}</text><text>张精彩瞬间</text>
						</view>
					</view>
				</view>
				<section class="list WaterFall">
					<u-waterfall v-model="flowList" ref="uWaterfall">
						<template v-slot:left="{ leftList }">
							<view :class="{ 'demo-warter': true, 'checked': selectedImages.includes(item.id) }"
								v-for="(item, index) in leftList" :key="index">
								<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
								<u-lazy-load threshold="-450" border-radius="10" :image="item.url" :index="index"
									@click="toggleSelectImage(item.id, index)"></u-lazy-load>

								<view class="check_area g_full" v-if="!isCartEdit">
									<i class="check_btn"></i>
								</view>

							</view>

						</template>
						<template v-slot:right="{ rightList }">
							<view :class="{ 'demo-warter': true, 'checked': selectedImages.includes(item.id) }"
								v-for="(item, index) in rightList" :key="index" @click="toggleSelectImage(item.id, index)">
								<u-lazy-load threshold="-450" border-radius="10" :image="item.url"
									:index="index"></u-lazy-load>
								<view class="check_area g_full" v-if="!isCartEdit">
									<i class="check_btn"></i>
								</view>
							</view>

						</template>
					</u-waterfall>

				</section>
				<view class="face-fixed-bar" style="" v-if="isCartEdit">
					<view class="flex-v" @click="homepage"><img
							src="https://static1.weizan.cn/zhibo/livecontent/topic/images/face-back.png"
							alt=""><text>返回直播</text></view>
					<view class="flex-v" @click="homepage"><img
							src="https://static1.weizan.cn/zhibo/livecontent/topic/images/face-pic.png"
							alt=""><text>再次找图</text></view>
					<view class="face-share-btn" @click="isCartEdit = false">下载</view>
					<!-- <view class="face-jigsaw-btn">拼图</view> -->
				</view>

				<footer class="check_footer" v-else>
					<p class="down-tips"> 付费明细: 单张图片5.00元，总共选中1张，已包含可免费下载0张 </p>
					<div class="row g_max">
						<div class="cancel" @click="isCartEdit = true"><u-icon name="close" size="28"></u-icon>取消</div>
						<div class="d-flex btn-wrap-outer">
							<div class="free-download"><!---->
								<div class="btn-down">
									<p class="btn-text">免费下载</p>
									<p class="sub-text">有水印</p>
								</div>
							</div>
							<div class="pay-download">
								<div class="btn-down">
									<p class="btn-text">共5.00元</p>
									<p class="sub-text">高清无水印原图</p>
								</div>
							</div>
						</div>
					</div><!----><!---->
				</footer>
				<view class="no-data" style="display: none;"><img width="172" class="no-img"
						src="https://j1.weizan.cn/live-statics/livepage/live-static/img/noresult.cbef69a7.png" alt=""
						srcset="">
					<view class="no-btn-wrap">
						<view class="back-btn">
							<img src="https://static1.weizan.cn/zhibo/livecontent/topic/images/face-back.png"
								alt=""><text>返回直播</text>
						</view>
						<view class="re-find-btn"><img
								src="https://static1.weizan.cn/zhibo/livecontent/topic/images/face-pic.png" alt=""><text
								class="">再次找图</text></view>
					</view>
				</view>
			</view>
		</view>


		<!-- 照片详情 -->
		<Details :list='list' :current='index' @close="isDeta = false" :show="isDeta" :live_id='live_id'/>
	</view>
</template>

<script>
import * as Get from '@/api/photo'
import Details from '@/components/details'
export default {
	components: {

		Details,


	},
	data() {
		return {
			isDeta: false,
			index: 0,
			live_id:'',
			loadStatus: 'loadmore',
			flowList: [
				// { id: 1, url: 'https://img0.baidu.com/it/u=544109860,2818433292&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500' },
				// { id: 3, url: 'https://img0.baidu.com/it/u=544109860,2818433292&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500' },
				// { id: 4, url: 'https://img0.baidu.com/it/u=544109860,2818433292&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500' },
			],
			list: [

			],
			isCartEdit: true,
			selectedImages: [],
		}
	},
	methods: {
		cancellation() {

		},
		homepage() {
			console.log(223)
			console.log(this.$route)
			// this.$router.push({ path: 'pages/index/index' })
			uni.navigateTo({
			  url: `/pages/index/index?live_id=${this.live_id}`,
			  // success: function(res) {
			  //   console.log('跳转成功');
			  // },
			  // fail: function(err) {
			  //   console.log('跳转失败', err);
			  // }
			});
			// uni.navigateTo({
			// 	url: '/pages/index/index'
			// });
			// this.$navTo('pages/index/index')

			// this.$navTo('pages/index/index');
		},
		addRandomData() {
			// await this.onData();
			for (let i = 0; i < this.list.length; i++) {
				let index = this.$u.random(0, this.list.length - 1);
				// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
				let item = JSON.parse(JSON.stringify(this.list[index]))
				// console.log(item, "item")
				// item.strId=this.$u.guid()
				// item.id = this.$u.guid();
				// this.flowList.push(this.list[index]);
			}
		},
		remove(id) {
			this.$refs.uWaterfall.remove(id);
		},
		clear() {
			this.$refs.uWaterfall.clear();
		},
		onData() {
			Get.faceSearchPhoto({ id: this.id, live_id: this.live_id }).then(res => {
				this.list = res.data.list;
				this.flowList = res.data.list;
				// this.addRandomData()
				console.log(this.list, "liust")
			})
		},
		toggleSelectImage(id, index) {
			if (this.isCartEdit) {
				this.index = index
				this.isDeta = true;
			}
			// console.log(id)
			if (this.isCartEdit) return
			console.log(id)
			if (this.selectedImages.indexOf(id) > -1) {
				this.selectedImages = this.selectedImages.filter(item => item != id);
			} else {
				this.selectedImages.push(id);
			}

		},
	},

	onLoad(options) {

		// this.addRandomData();
		let imageURL = uni.getStorageSync('imageURL');
		//   console.log(imageURL); // 输出 
		this.url = imageURL;
		this.id = options.id;
		this.live_id = options.live_id;
		this.onData();
		console.log(options); // 输出 value1
		console.log(options); // 输出 value2
	},
	onReachBottom() {
		this.loadStatus = 'loading';
		// 模拟数据加载
		// setTimeout(() => {
		// 	this.addRandomData();
		// 	this.loadStatus = 'loadmore';
		// }, 1000)
	},

}
</script>

<style scoped lang="scss">
#find-result {
	background: linear-gradient(180deg, #22235b, #0e0f2c);
	min-height: 100%;

	.own-top {
		height: 200rpx;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 22;
		padding-top: 17px;
	}

	.before-fl {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		background-color: rgba(0, 0, 0, .3);
		background-image: url(https://static1.weizan.cn/zhibo/livecontent/topic/images/jcsj-bg.png);
		background-repeat: no-repeat centen center;
		background-size: 100% 100%;
	}

	.contetn-ft {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;

		text {
			color: #fff;
		}

		.num {
			color: #0048ff;

		}
	}

	.face-images-wrap.center {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: auto;
		// overflow-y: scroll;
		align-items: center;
	}

	.center {
		justify-content: center;
	}

	.face-images-item.active {
		width: 120rpx;
		height: 120rpx;
		border: 2rpx solid #006cff;
		border-radius: 50%;

		img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}

	.WaterFall {
		height: 100vh;
		margin-top: 200rpx;
		padding-bottom: 140rpx;
	}

	.face-fixed-bar {
		z-index: 22;
		background: #0f102f;
		padding: 0 20rpx 0 26rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		border-top: 1px solid rgba(245, 246, 247, .1);
		display: flex;
		width: 100%;
		height: 140rpx;
		align-items: center;
		justify-content: space-between;

		.flex-v {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 50rpx;
			color: #FFFFFF;

			img {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 0.05rem;
			}
		}

		.face-share-btn {
			background: linear-gradient(270deg, #ffa800, #ffe156);
		}

		.face-jigsaw-btn {
			margin-left: 20rpx;
			background: linear-gradient(270deg, #006cff, #00a5ff);
		}

		.face-share-btn,
		.face-jigsaw-btn {
			display: flex;
			justify-content: center;
			color: #fff;
			font-size: 26rpx;
			align-items: center;
			flex: 1;
			height: 80rpx;
			border-radius: 60rpx;
		}

	}

}

.demo-warter {
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 2px;
	position: relative;
}

.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}

.demo-image {
	width: 100%;
	border-radius: 4px;
}

.demo-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: $u-main-color;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-tag-owner {
	background-color: $u-type-error;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-tag-text {
	border: 1px solid $u-type-primary;
	color: $u-type-primary;
	margin-left: 10px;
	border-radius: 50rpx;
	line-height: 1;
	padding: 4rpx 14rpx;
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	font-size: 20rpx;
}

.demo-price {
	font-size: 30rpx;
	color: $u-type-error;
	margin-top: 5px;
}

.demo-shop {
	font-size: 22rpx;
	color: $u-tips-color;
	margin-top: 5px;
}

/deep/ {
	.u-column {
		position: relative;
	}
}


.check_btn {
	position: absolute;
	left: 10rpx;
	top: 0;
	z-index: 6;
	width: 60rpx;
	height: 60rpx;
	background: url(../../static/weix.png)no-repeat;
	background-size: 100% 100%;
}

.checked .check_btn {
	background: url(../../static/yixuan.png)no-repeat;
	background-size: 100% 100%;
}


.check_footer {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	z-index: 999;
	width: 100%;

	.down-tips {
		line-height: 60rpx;
		height: 60rpx;
		background: #fff8ec;
		font-size: 24rpx;
		font-weight: 400;
		color: #ffa800;
		padding: 0 16rpx;
		text-overflow: clip;
		overflow: hidden;
		white-space: nowrap;
		width: 100%;
		box-sizing: border-box;
	}

	.d-flex {
		display: flex;
	}

	.row {
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		background: #fff;
		box-sizing: border-box;

		.cancel {
			display: flex;
			flex-direction: column;
			cursor: pointer;
			font-size: 26rpx;
			flex-shrink: 0;
			align-items: center;
		}

		.btn-wrap-outer {
			flex: 1;
		}

		.free-download,
		.pay-download {
			display: flex;
			flex: 1;
			position: relative;
			margin-left: 20rpx;
		}

		.pay-download {
			.btn-down {
				background: linear-gradient(270deg, #ff8d00, #ffc000);
			}

		}

		.btn-down {
			height: 100rpx;
			border-radius: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			color: #fff;
			background: linear-gradient(270deg, #006cff, #00a5ff);
		}
	}

}
</style>